<style scoped>
.cart_outer{align-items: stretch;padding: 8px;}
.cart_row{align-items: stretch;}
.cart_row>.img{width: 100px;height: auto;}
.cart_row>.content{flex-direction: column;align-items: stretch;padding: 1px 4px 1px 8px;}
.cart_row .price{text-align: right;color: #ff9200;font-weight: bold;}
.cart_row .price>.sm{font-size: 0.7em;}
.cart_row .sales{text-align: right;opacity: 0.8;font-size: 0.8em;}

.additional_outer{width: 100%;overflow-x: scroll;margin-top: 5px;}
.additional_outer::-webkit-scrollbar{display: none;}
.additional_inner>.item{margin-left: 5px;}
.additional_inner>.item:first-child{margin-left: 0;}
</style>
<template>
  <div class="cart_outer">
    <div class="cart_row flex">
      <img-referrer class="img" :src="_href(head_img)" :alt="title" draggable="false"/>
      <div class="content max flex">
        <h4>{{title}}</h4>
        <div class="sku" v-if="model.switch_price_sku && sku_id>0" @click="select_sku">{{sku_title}}</div>
        <p class="max"></p>
        <div class="flex" style="justify-content: space-between;">
          <p class="price">
            <span class="sm">￥</span>{{price}}
            <span></span>
          </p>
          <p class="num">
            <van-stepper :model-value="num" @update:modelValue="$emit('update:num',$event)" min="1" @change="change('num', $event)" />
          </p>
        </div>
      </div>
    </div>
    <div class="additional_outer" v-if="model.switch_price_additional && additional_select_list.length" @click.stop="select_additional">
      <div class="additional_inner flex">
        <van-button class="item" v-for="row in additional_select_list" type="primary"  hairline size="small" >
          <p>{{row.title}} X{{row.num}}</p>
          <p class="money">{{Number(row.final_all_price).toFixed(2)}}</p>
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {S94Model} from "@/js/S94Model.js";
import {_href} from "@/js/s94_tool.js";
import tool from "@/js/tool.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";

export default {
  components: {ImgReferrer},
  props:{
    link_table: String,
    title: String,
    head_img: String,
    price: [String,Number],
    num: [String,Number],
    sku_id: [String,Number],
    additional_select: {
      type: Object,
      default: {},
    },

    compute_price: Object,
  },
  emits: ['update:num', 'update:sku_id', 'update:additional_select', 'change'],
  data(){
    let model = S94Model.find(this.link_table);
    return {
      model: model,
      num_copy: parseInt(this.num),
      cart: {
        title: this.title,
        head_img: this.head_img,
        price: this.price || 0,
        num: this.num || 1,
        sku_id: this.sku_id || 0,
        additional_select: this.additional_select || {},
      },

      sku_group: [],
      sku_list: [],

      additional_group: [],
      additional_list: [],
    }
  },
  methods:{
    _href: _href,
    change(key, v){
      this.$emit('change', {[key]:v});
    },
    select_sku(){
      if (!this.sku_list.length) return;
      tool.select_sku(this.sku_group, this.sku_list, this.switch_stock, this.sku_id, this.num).then((sku)=>{
        this.$emit('update:sku_id', sku.id);
        this.$emit('change', {sku_id: sku.id});
      })
    },
    select_additional(){
      if (!this.additional_list.length) return;
      tool.select_additional(this.additional_list, this.additional_group, this.additional_select).then((additional_select)=>{
        this.$emit('update:additional_select', additional_select);
        this.$emit('change', {additional_select: additional_select});
      })
    },
    find_additional(key){
      let id = key.split(/\D/).pop();
      let res = this.additional_list.find(row=>{
        if (row.id == id) return true;
      })
      return res || {};
    },
    compute_price_init(){
      let v = this.compute_price;
      if (typeof v !== 'object') return;
      this.sku_group = v.sku_group;
      this.sku_list = v.sku_list;
      this.$emit('update:sku_id', v.sku_id);

      this.additional_group = v.additional_group;
      this.additional_list = v.additional_list;
      this.$emit('update:additional_select', v.additional_select);
    }
  },
  computed:{
    sku_title(){
      let sku = this.sku_list.find(row=>{
        return row.id == this.sku_id;
      })
      return sku ? sku.title : '';
    },
    additional_select_list(){
      let res = [];
      Object.keys(this.additional_select).forEach(key=>{
        res.push(this.find_additional(key));
      })
      return res;
    },
  },
  watch:{
    compute_price(v){
      this.compute_price_init();
    },
  },
  mounted(){
    this.compute_price_init();

  }
}
</script>